<template lang="html">
  <div id="rightaction" v-if=' result.data !=null && totalAction !=null'>
      <div class="title">共做对了{{totalAction}}个动作</div>
      <ul class="action clearfix" v-if='result.data != null'>
        <li v-for="(item,id ) in result.data" :key ='id' >
          <span class="acname">{{ item.name }}</span>
          <span class="acnum">{{ item.num }}&nbsp;&nbsp;个</span>
        </li>
        <!--<li>
          <span class="acname">勾腿跑</span>
          <span class="acnum">13个</span>
        </li>
        <li>
          <span class="acname">勾腿跑</span>
          <span class="acnum">13个</span>
        </li>
        <li>
          <span class="acname">勾腿跑</span>
          <span class="acnum">13个</span>
        </li>
        <li>
          <span class="acname">勾腿跑</span>
          <span class="acnum">13个</span>
        </li>
        <li>
          <span class="acname">勾腿跑</span>
          <span class="acnum">13个</span>
        </li>-->
      </ul>
  </div>
</template>

<script>
    import {
        errFun,
    } from "../../tools.js";
    import api from "../../api"
    export default {
        computed: {
            // getR() {
            //     return this.$store.state.result
            // },
        },
        created() {
            // this.$store.dispatch('GET_RESULT_BY', this.$route.params.id);
            this.getResult();
        },
        // props: ['result'],
        data() {
            return {
                totalAction: 17,
                actions: [

                    {
                        name: "勾腿跑",
                        num: 24
                    }, {
                        name: "勾腿跑",
                        num: 24
                    }, {
                        name: "勾腿跑",
                        num: 24
                    }, {
                        name: "勾腿跑",
                        num: 24
                    }, {
                        name: "勾腿跑",
                        num: 24
                    }, {
                        name: "勾腿跑",
                        num: 24
                    }, {
                        name: "勾腿跑",
                        num: 24
                    },
                ],
                result: {
                    data: null,
                    message: '',
                },
                totalAction: null,
            }
        },
        methods: {
            // 获取结果 ----- 进行渲染页面的信息
            getResult() {
                var that = this;
                api.getResultBY(this.$route.params.id).then(function(result) {
                    if (result.data.code == 200) {
                        // 必须得等数据请求成功，才能渲染
                        that.delResult(result, that);
                    }
                })
            },
            // 获取到的数据的处理
            delResult(result, that) {
                if (result.data.code == 200) {
                    // console.log(result.data.result)
                    var total = 0;
                    for (var i = 0; i < result.data.result.actions.length; i++) {
                        total = total + result.data.result.actions[i].num;
                    }
                    // that.totalAction = result.data.result.totalAction;
                    that.totalAction = total;
                    that.result.data = result.data.result.actions;
                } else {
                    that.result.message = result.data.message;
                }
            },
        },
    }
</script>

<style>
    #rightaction {
        width: 90%;
        /*height: 150px;*/
        position: relative;
        margin-top: 40px;
        /*background-color: #31384b;*/
        border: 1px solid #feb801;
        margin-left: 5%;
        .title {
            width: 90%;
            height: 40px;
            font-size: 16px;
            line-height: 40px;
            text-align: center;
            margin-left: 5%;
            color: #feb801;
        }
        .action {
            width: 70%;
            margin-left: 15%;
            margin-top: 10px;
            font-size: 14px;
            color: #feb801;
        }
        .action li {
            display: block;
            height: 40px;
        }
        .action li .acname {
            display: block;
            float: left;
        }
        .action li .acnum {
            display: block;
            float: right;
        }
    }
</style>